<script setup lang="ts">
import asides from "@/components/my/asides.vue";
import record from "@/components/my/record.vue";
import footers from "@/components/common/footers.vue";
import headers from "@/components/common/headers.vue";
import dialogs from "@/components/my/dialogs.vue";
import baseInfo from "@/components/my/baseInfo.vue";

import { ref } from "vue";

// aside--
let asideList = [
  {
    label: "基本信息",
    position: "基本信息",
  },
  {
    label: "我的企业信息",
  },
  {
    label: "密码修改",
  },
  {
    label: "投诉记录",
    position: "基本信息",
  },
  {
    label: "我的收藏",
  },
  {
    label: "我的点赞",
  },
  {
    label: "我的评论",
  },
];
let asideIndex = ref(0);
// aside==

let isDialog = ref(false);
</script>

<template>
  <div class="my">
    <!-- 头部信息 -->
    <headers nexts="个人中心" />

    <!-- 中间内容区域 -->
    <div class="main">
      <asides :list="asideList" v-model:index="asideIndex" />
      <!-- 内容外壳区 -->
      <div class="contents">
        <div class="title">{{ asideList[asideIndex].label }}</div>
        <!-- 每一个item 对应的内容区域 -->
        <!-- 基本信息 -->
        <baseInfo v-if="asideIndex == 0" />
        <!-- 投诉记录 -->
        <record v-else-if="asideIndex == 3" v-model:isDialog="isDialog" />
      </div>
    </div>

    <!-- 底部单位信息 -->
    <footers />
  </div>

  <!-- 是否显示记录详情 -->
  <dialogs v-model:isDialog="isDialog" />
</template>

<style scoped lang="scss">
.my {
  padding-top: 45px;
  // 背景图片
  background: #f1f2f3 url("@/assets/my/bg.webp") no-repeat fixed center top;
  background-size: 100% 380px;

  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px 0px;
}

.main {
  @include flexCenterCenter;
  gap: 0px 16px;
  margin-bottom: 150px;
}

.contents {
  width: 784px;
  height: 684px;
  min-height: 676px;
  background-color: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  border: 1px solid #f2f6fc;
  padding: 24px;
}
.title {
  height: 20px;
  line-height: 20px;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 24px;
}
</style>
